<template>
  <m-mescroll-uni
    ref="mescrollRef"
    :down="{ auto: false }"
    :up="upConfig"
    @init="mescrollInit"
    @up="upCallback"
    @down="downCallback"
    :fixed="false"
    :height="height"
    background="#eef3f9"
  >
    <out-work-cell :modal="item" v-for="(item, index) in list" :key="item.outOrderId" :border="false">
      <m-button slot="link" size="sm" plain :type="outStatusMap[item.status].color">
        {{ outStatusMap[item.status].text }}
      </m-button>
      <view class="container">
        <view class="row">
          <view class="item">
            <text class="title">申请人</text>
            <text>{{ userList.map[item.operName] }}</text>
          </view>
          <view class="item">
            <text class="title"> 出库数量（个）</text>
            <text>{{ item.totalQuality }}</text>
          </view>

          <view class="item">
            <text class="title">审核人</text>
            <text>{{ userList.map[item.auditName] }}</text>
          </view>

          <view class="item">
            <text class="title">出库类型</text>
            <text>{{ dicts['out_order_source_type'].map[item.sourceType] }}</text>
          </view>
        </view>

        <view class="tip" v-if="item.status === 6 && item.remark">驳回原因：{{ item.remark }}</view>

        <view class="df aic" :style="{ justifyContent: [5, 6].includes(item.status) ? 'space-between' : 'center' }">
          <template v-if="[5, 6].includes(item.status)">
            <m-button width="40%" size="md" shape="round" @click="handleEdit(item)" plain background="#fff">
              修改
            </m-button>
            <m-button width="56%" size="md" shape="round" @click="handleClickAudit(item)">提交审核</m-button>
          </template>
          <m-button
            v-else-if="[0, 2, 3].includes(item.status)"
            width="80%"
            plain
            size="md"
            shape="round"
            background="#fff"
            @click="handleClick(item)"
          >
            出库单详情
          </m-button>
          <m-button v-else-if="item.sourceType === 0" width="80%" size="md" shape="round" @click="handleClick(item)">
            开始出库
          </m-button>
        </view>
      </view>
    </out-work-cell>
  </m-mescroll-uni>
</template>

<script>
import { router } from '@/router'
import { mapState } from 'vuex'
import { showModal } from '@/hooks'
import { updateOutOrder, getOutOrder } from '@/api/modules/out-work'
import { outStatusMap } from '@/utils/constant'
import { minCache } from '@/utils/min-cache'

export default {
  props: {
    height: {
      type: String,
      default: '100vh',
    },
    api: {
      type: Function,
      default: () => {},
    },
    modal: {
      type: Object,
      default: () => {},
    },
    isHistory: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      upConfig: {
        empty: {
          icon: require('@/static/empty.png'),
          use: true,
        },
      },
      mescrollObj: {},
      outStatusMap,
    }
  },
  computed: {
    ...mapState({
      userList: (state) => state.cache.userList,
      dicts: (state) => state.outWork.dicts,
    }),
  },
  methods: {
    async handleClickAudit({ outOrderId }) {
      showModal({
        title: '审核提示',
        content: '是否提交审核？',
        showCancelButton: true,
        confirmText: '提交',
        slot: true,
        confirm: async () => {
          const { data } = await getOutOrder(outOrderId)
          await updateOutOrder({
            ...data,
            status: 0,
          })
          this.mescrollObj.resetUpScroll()
        },
      })
    },
    handleClick(item) {
      const map = {
        1: 'OutWorkDetail',
        4: 'OutWorkStartDo',
        0: 'OutWorkDetail',
        2: 'OutWorkDetail',
        3: 'OutWorkDetail',
      }
      if (+item.status === 4) {
        minCache.set('outOrderId', item.outOrderId)
      }
      router.push({
        name: map[item.status],
        params: {
          id: item.outOrderId,
          isHistory: this.isHistory,
        },
      })
    },
    handleEdit(item) {
      router.push({
        name: 'addOutWork',
        params: {
          id: item.outOrderId,
        },
      })
    },
    mescrollInit(mescroll) {
      this.mescrollObj = mescroll
    },
    async upCallback(page) {
      this.params.pageNum = page.num
      await this.fetchData()
    },
    downCallback() {
      this.mescrollObj && this.mescrollObj.resetUpScroll()
    },
    async fetchData() {
      const { rows } = await this.api({ ...this.params, ...this.modal })
      this.mescrollObj.endSuccess(rows.length, rows.length === this.params.pageSize)
      this.list = this.params.pageNum === 1 ? rows : [...this.list, ...rows]
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20rpx 20rpx;

  .row {
    display: flex;
    justify-content: space-around;
    background: rgba(245, 251, 253, 1);
    padding: 30rpx 0;
    margin-bottom: 20rpx;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      text-align: center;
      font-size: 32rpx;
      .title {
        color: #637687;
        font-size: 26rpx;
        margin-bottom: 25rpx;
      }
    }
  }

  .tip {
    font-size: 26rpx;
    color: #ff2727;
    margin-bottom: 20rpx;
    background: #fef2f2;
    padding: 15rpx 20rpx;
    border-radius: 10rpx;
  }
}
</style>
